<template>
  <div class="page-card flex-1">
    <plate-card :icon="TitleIcon" title="市场信息">
      <!--      <div class="header">-->
      <!--        <span class="opacity-70">上市时间</span>-->
      <!--        <span class="font-bold">2024-10.10</span>-->
      <!--      </div>-->
      <div class="mt-[8px]">
        <div class="opacity-70">不同品种柑橘的市场价格</div>
        <div class="h-[100px] mt-2 echart-bg">
          <dv-scroll-board :config="priceConfig" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div class="mt-[8px]">
        <div class="opacity-70">订单信息</div>
        <div class="h-[100px] mt-2 echart-bg">
          <dv-scroll-board :config="orderConfig" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div class="mt-[8px]">
        <div class="opacity-70">销量走势</div>
        <div class="mt-2 py-1 h-[100px] echart-bg">
          <v-charts :autoresize="true" :option="visitorOption" style="height: 100%" />
        </div>
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
  import { reactive, ref } from 'vue'
  import TitleIcon from '@/assets/images/card-title/market-info.png'
  import { graphic } from 'echarts'
  import vCharts from 'vue-echarts'

  const scrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)

  const commonConfig = {
    index: false,
    rowNum: 3,
    headerHeight: 24,
    oddRowBGC: '#001849',
    evenRowBGC: '#002C5C',
    columnWidth: [130, 80, 60],
    align: ['center', 'center', 'center', 'center']
  }

  const priceConfig = reactive({
    header: ['品种', '元/斤', '地区', '时间'],
    data: [
      ['云南高山沃柑', '3.00', '云南', '2024.01.14'],
      ['广西砂糖橘', '2.70', '广西', '2024.01.13'],
      ['武鸣沃柑', '3.50', '广西', '2024.01.14'],
      ['云南高山沃柑', '3.00', '云南', '2024.01.14'],
      ['广西砂糖橘', '2.70', '广西', '2024.01.13'],
      ['武鸣沃柑', '3.50', '广西', '2024.01.14']
    ],
    ...commonConfig
  })
  const orderConfig = reactive({
    header: ['订单', '数量/万箱', '地区', '时间'],
    data: [
      ['线上', '2.10', '东北', '2024.01.11'],
      ['厦门', '1.36', '福建', '2024.01.10'],
      ['苏州', '2.80', '江苏', '2024.01.10'],
      ['线上', '2.10', '东北', '2024.01.11'],
      ['厦门', '1.36', '福建', '2024.01.10'],
      ['苏州', '2.80', '江苏', '2024.01.10']
    ],
    ...commonConfig,
    columnWidth: [100, 100, 60]
  })

  const visitorOption = ref({
    grid: {
      top: '16%',
      left: '3%',
      right: '2%',
      bottom: '1%',
      containLabel: true
    },
    tooltip: {},
    xAxis: {
      title: '月份',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十一月', '十二月'],
      axisTick: {
        show: true,
        inside: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 10
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#0079A4'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      nameTextStyle: {
        color: '#fff',
        fontSize: 10
      },
      axisTick: {
        show: true,
        inside: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#0079A4'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 10,
        margin: 5
      },
      splitLine: {
        show: false // 隐藏 x 轴线
      },
      interval: 0.4
    },
    series: [
      {
        name: '数量',
        type: 'line',
        data: [1, 0.5, 0.6, 0.3, 0.32, 0.51, 0.5, 0.55, 0.8, 1.1, 1.2, 1.0],
        label: {
          show: true,
          position: 'top',
          color: '#45549F',
          fontSize: 8,
          distance: -10,
          width: 16,
          height: 16,
          lineHeight: 16,
          backgroundColor: '#fff',
          borderRadius: 100
        },
        smooth: true,
        barWidth: 20,
        itemStyle: {
          height: 16,
          color: '#00d9ff'
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 101, 147)'
            },
            {
              offset: 1,
              color: 'rgba(0, 30, 78,0.3)'
            }
          ])
        }
      }
    ]
  })
</script>

<style lang="scss" scoped>
  .page-card {
    font-size: 14px;
  }
  .header {
    margin-top: 8px;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #001e6b;
  }
  :deep(.dv-scroll-board) {
    .header {
      //background: linear-gradient(to right, #002675, #00568c);
      background: url('@/assets/images/scroll-board-title-bg.png') no-repeat top transparent !important;
      background-size: 100% 100%;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }
    .row-item {
      color: #00d9ff;
      //height: 24px !important;
      //line-height: 24px !important;
      font-size: 10px !important;
      background: transparent !important;
    }
  }
  .echart-bg {
    //background: rgba(0, 24, 71, 0.2);
    background: url('@/assets/images/board-bg.png') no-repeat top transparent !important;
    background-size: 100% 100%;
  }
</style>
